
.sidebar-container {
	transition: width 0.28s;
	width: @sideBarWidth !important;
	background-color: @menuBg;
	height: 100%;
	position: fixed;
	font-size: 0px;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1001;
	overflow: hidden;
	text-align: left;

	// reset element-ui css
	.horizontal-collapse-transition {
		transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
	}

	.scrollbar-wrapper {
		overflow-x: hidden !important;
	}

	.el-scrollbar__bar.is-vertical {
		right: 0px;
	}

	.el-scrollbar {
		height: 100%;
	}

	&.has-logo {
		.el-scrollbar {
			height: calc(100% - 50px);
		}
	}

	.is-horizontal {
		display: none;
	}

	a {
		display: inline-block;
		width: 100%;
		overflow: hidden;
	}

	.svg-icon {
		margin-right: 16px;
	}

	.el-menu {
		border: none;
		height: 100%;
		width: 100% !important;
		border-right: 1px solid #e8e8e8;
	}

	// menu hover
	.submenu-title-noDropdown,
	.el-submenu__title {
		&:hover {
			background-color: @menuHover !important;
		}
	}

	.el-submenu.is-active,.el-menu-item.is-active {
		background-color: @menuActiveBg !important;
	}
	.is-active>.el-submenu__title, .is-active>.el-submenu__title i{
		color: @subMenuActiveText !important;
	}
	& .nest-menu .el-submenu>.el-submenu__title,
	& .el-submenu .el-menu-item {
		min-width: @sideBarWidth !important;
		background-color: @subMenuBg !important;
		// &.is-active {
		// 	background-color: @menuActiveBg !important;
		// }

		&:hover {
			background-color: @subMenuHover !important;
		}
	}

}

.hideSidebar {
	.sidebar-container {
		width: 64px !important;
	}

	.main-container {
		margin-left: 64px;
	}

	.submenu-title-noDropdown {
		padding: 0 !important;
		position: relative;

		.el-tooltip {
			padding: 0 !important;

			i {
				margin-left: 20px;
			}
		}
	}
	.el-submenu {
		overflow: hidden;

		&>.el-submenu__title {
			padding: 0 !important;

			i {
				margin-left: 20px;
			}

			.el-submenu__icon-arrow {
				display: none;
			}
		}
	}
	.el-menu--collapse {
		.el-submenu {
			&>.el-submenu__title {
				&>span {
					height: 0;
					width: 0;
					overflow: hidden;
					visibility: hidden;
					display: inline-block;
				}
			}
		}
	}
}

.el-submenu .el-menu-item,
.el-menu-item, .el-submenu__title {
	height: 43px;
	line-height: 43px;
}
.el-container {
	height: 100%;
}

#app .sidebar-container.has-logo .el-scrollbar {
	height: calc(100% - 50px);
}